<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            margin: 20px auto;
            width: fit-content;
            padding: 20px;
            background: skyblue;
           
        }
        p{
            width: 250px;
            display: flex;
            justify-content: space-between;
        }
        button{
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <section>
        <p><label for="accounts">帐号:</label><input type="text" id="accounts"></p>
        <p><label for="name1">昵称:</label><input type="text" id="name1"></p>
        <p><label for="email">电子邮箱:</label><input type="text" id="email"></p>
        <p><label for="idNum">身份证:</label><input type="text" id="idNum"></p>
        <p><label for="cellPhone">手机号码:</label><input type="text" id="cellPhone"></p>
        <p><label for="birthday">生日:</label><input type="text" id="birthday"></p>
        <p><label for="password">密码:</label><input type="text" id="password"></p>
        <p><label for="Password2">确认密码:</label><input type="text" id="Password2"></p>
        <button id="btn">立即注册</button>
    </section>
    <script>
    //     ## 4、表单的验证（以下是需求）
    // -  【1】验证账号
    //     - 用户名不能为空
    //     - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
    //     - 必须以字母开头
    //     - 长度6-20
    // -  【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
    // -  【3】电子邮件
    //     + 163邮箱：
    //     + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
    //     + @后面的域名只能是163
    //     + 域名后缀（.com .cn .net）可以有多个。
    // 【4】身份证 18位数 后面以为可能是 X x
    // - 【5】手机号码
    // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
    // - 【6】生日验证
    // + 1999/05/08
    // + 1999-05-08
    // + 19990508
    // - 【7】密码  
    // + 长度小于20 
    // + 不能包含空格 密码不一致能不能提交
    var btn = document.querySelector('#btn')
    // 帐号
    var accounts = document.querySelector('#accounts')
                // 以字母开头，长度为19的数字，字母，下划线
    var regAcc = /^[a-z][\w\S\-]{5,19}$/i
    // 昵称
    var name1 = document.querySelector('#name1')
    var regName = /^[\u4e00-\u9fa5]{3,6}$/
    // 电子邮件
    var email = document.querySelector('#email')
                // 数字字母长度为5-11 @ 163等 . 后缀结尾
    var regEmail = /^[0-9a-zA-Z]{5,11}@(163|qq|126)\.(com|cn|sina|net)$/
    // 身份证
    // 440982199908111410
    var idNum = document.querySelector('#idNum')
        // 以1-9开头，\d五位， 1500年开始到两千年后4位数，  // 月份         // 日               // \d三位 // 以数字Xx结尾
    var regIdNum = /^[1-9]\d{5}(1[5-9][0-9][0-9]|2[0-9]{3})(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X|x)$/
    // 手机号码
    var cellPhone = document.querySelector('#cellPhone')
    var regcellPhone = /^1[356789]\d{9}$/
    // 生日
    var birthday = document.querySelector('#birthday')
    var regbirthday = /^\d{4}(\/|-)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/
    // 密码
    var password = document.querySelector('#password')
    var regPassword = /^[\d\S]{1,20}$/

    var Password2 = document.querySelector('#Password2')



    btn.onclick = function(){
        if(!regAcc.exec(accounts.value)){
            alert('请输入以字母开头，数字字母下划线组成长度为6-20的帐号')
        }
        if(!regName.exec(name1.value)){
            alert('请输入三到五个中文为昵称')
        }
        if(!regEmail.exec(email.value)){
            alert('请输入正确的邮箱地址')
        }
        if(!regIdNum.exec(idNum.value)){
            alert('请输入正确的身份证号码')
        }
        if(!regcellPhone.exec(cellPhone.value)){
             alert('请输入正确的手机号码')
        }
        if(!regbirthday.exec(birthday.value)){
              alert('请输入正确的生日')
        }
        if(!regPassword.exec(password.value)){
              alert('请输入正确密码格式')
        }
        if(password.value != Password2.value){
            alert('请输入一致的密码')
        }
    }
    </script>
</body>
</html>